@import "../base/mixins";
@import "../common/variables";
// Animation
// —————————————————————————————————

//== Subview
@include keyframes(fadeIn) {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
@include keyframes(showSubViewContent) {
  0% {
    margin-top: 100%;
    opacity: 0;
    // transform: scale(0.95) translate3d(0, 100%, 0);
  }
  100% {
    margin-top: 0;
    opacity: 1;
    // transform: scale(1) translate3d(0, 0, 0);
  }
}

//== Loader
@include keyframes(loader) {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% { opacity: 1 }
  100% { transform: scale(1) }
}

//== Header color picker
@include keyframes(pulse) {
  0%, 20% { transform: scale(1) }
  10% { transform: scale(1.04) }
}


//== Modal loader
@include keyframes(modalLoader) {
  from { transform: rotate(0) }
  to { transform: rotate(360deg) }
}


//== Grid loader
@include keyframes(gridLoading) {
  from { transform: rotate(0) }
  to { transform: rotate(360deg) }
}

// rapidfade
.rapidfade-enter {
  opacity: 0.01;
}

.rapidfade-enter.rapidfade-enter-active {
  opacity: 1;
  transition: opacity 100ms ease-in;
}

.rapidfade-exit {
  opacity: 1;
}

.rapidfade-exit.rapidfade-exit-active {
  opacity: 0.01;
  transition: opacity 100ms ease-in;
}

// slide down
.slide-down-enter {
  transform: translateY(-100%);
}

.slide-down-enter.slide-down-enter-active {
  transform: translateY(0);
  transition: transform 100ms ease-in;
}

.slide-down-exit {
  transform: translateY(0);
}

.slide-down-exit.slide-down-exit-active {
  transform: translateY(-100%);
  transition: transform 100ms ease-in;
}

// slide up
.slide-up-enter {
  transform: translateY(100%);
  opacity: 0;
}

.slide-up-enter.slide-up-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: transform 200ms ease-in, opacity 200ms ease-in;
}

.slide-up-exit {
  transform: translateY(0);
  opacity: 1;
}

.slide-up-exit.slide-up-exit-active {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 200ms ease-in, opacity 200ms ease-in;
}
